<template>
  <div class="card params-div-pos">
    <div class="title1">
      自定义遥测数据列表
    </div>
    <TmTable :table-data="tableData"></TmTable>
  </div>
</template>

<script setup>
import { onMounted, ref, computed, watch, onBeforeMount, onBeforeUnmount } from 'vue'
import { useWsStore } from '@/stores/ws-module'
import TmTable from './components/TmTable.vue'
import { initTm, initNavigate } from '@/api/wsObj.js'

let tableData = ref([])
let curSeqArr = []

const wsStore = useWsStore()
const tmObj = computed(() => wsStore['tm'])
const navObj = computed(() => wsStore['navigate'])
let tmWsObj = null
let navWsObj = null
let intervalId = ref(null)

onBeforeMount(() => {
  tmWsObj = initTm()
  navWsObj = initNavigate()
  intervalId = setInterval(() => {
    initTable()
  }, 1000)
})

onMounted(() => {
  getPassSeq()
})

onBeforeUnmount(() => {
  tmWsObj?.disconnect()
  navWsObj?.disconnect()
  clearInterval(intervalId)
})

const initTable = () => {
  tableData.value = pickSeqData(curSeqArr, tmObj.value, navObj.value)
}

const pickSeqData = (seqArr, tmObj, navObj) => {
  let resArr = []
  for (const item of seqArr) {
    const tmContent = tmObj[item]
    const navContent = navObj[item]
    if(tmContent != null) {
      resArr.push(tmContent)
    }
    if(navContent != null) {
      resArr.push(navContent)
    }
  }
  return resArr
}

const getPassSeq = () => {
  const curHref = window.location.href
  let params = curHref.split("?seq=")[1]
  if(params !== '') {
    curSeqArr = params.split(",")
  }
}
</script>
